<template>
  <div class="com-score">
    <div class="left">
      <c-circle :score="score" :colors="[colors[0], colors[1]]" :title="title" />
    </div>
    <div class="right">
      <!-- <div class="item">
        <div>不分行业排名</div>
        <div
          class="rang"
          :style="{ background: `linear-gradient(86deg, ${colors[2]}, ${colors[3]})` }"
        >{{ rang }}/{{ total }}</div>
      </div> -->
      <c-rang-type :colors="[colors[2], colors[3]]" title="不分行业排名" :rang="rang" :total="total" />
      <c-rang-type :colors="[colors[4], colors[5]]" title="分行业排名" :rang="rang1" :total="total1" />
      <!-- <div class="item">
        <div>分行业排名</div>
        <div
          class="rang"
          :style="{ background: `linear-gradient(86deg, ${colors[4]}, ${colors[5]})` }"
        >{{ rang1 }}/{{ total1 }}</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import CCircle from './CCircle';
import CRangType from './CRangType';
export default {
  components: {
    CCircle,
    CRangType
  },
  props: ["title", "score", "rang", "total", "rang1", "total1", "colors"]
};
</script>

<style lang="scss" scoped>
.com-score {
  display: flex;
  color: #2aaef2;
  font-size: 20px;
  justify-content: space-around;
  align-items: center;
  margin: 10px 0 0;
}
.left {
  width: 200px;
  .title {
    font-size: 30px;
  }
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    font-size: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: 20px auto 0;
  }
}
.right {
  width: 160px;
  .item {
    .rang {
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      margin: 8px 0 14px;
    }
  }
}
</style>
